<template>
  <div class="app-container">
    <div class="dataStats">
      <div>
        <span>{{ (Number(stats.walletAmount) + Number(stats.waitSettlementAmount) + Number(stats.waitSettlementTotal) + Number(stats.alreadyWithdrawalTotal) + Number(stats.inProgressWithdrawalTotal) + Number(stats.inviteDeductionTotal) + Number(stats.commissionTotal)) | numFilter }}</span>
        <div class="describe">
          <span>累计收款(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">可提现余额 + 待清算金额 + 待结算金额 + 成功提现 + 提现中 + 累计分销佣金 + 累计手续费</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ stats.walletAmount }}</span>
        <div class="describe">
          <span>可提现余额(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">当前可提现余额</p>
<!--            <p slot="content" style="font-size: 12px; color: #1ed3b2">提示：提现请前往移动端员工中心申请提现</p>-->
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
        <span style="padding-top: 10px">
          <el-button size="mini" type="primary" @click="withdrawalApply(stats.walletAmount)">
            去提现
          </el-button>
        </span>
      </div>
      <div>
        <span>{{ stats.waitSettlementAmount }}</span>
        <div class="describe">
          <span>待清算金额(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">活动过程中已结算的金额，待活动结束后手动清算或3天后自动清算到可提现余额中</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
        <span style="padding-top: 20px"></span>
      </div>
      <div>
        <span>{{ stats.waitSettlementTotal }}</span>
        <div class="describe">
          <span>待结算金额(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">消费者付款后未核销尚未结算到待提现金额中</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ stats.alreadyWithdrawalTotal }}</span>
        <div class="describe">
          <span>成功提现(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">累计成功提现金额，不含提现中及提现失败</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
        <div class="inProgressWithdrawal"><span>提现中: {{ stats.inProgressWithdrawalTotal }}</span></div>
      </div>
      <div>
        <span>{{ stats.inviteDeductionTotal }}</span>
        <div class="describe">
          <span>累计分销佣金(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">累计分销佣金总额</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ stats.commissionTotal }}</span>
        <div class="describe">
          <span>累计手续费(元)</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">累计微信手续费总额</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
    </div>

    <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
      <el-tab-pane label="余额明细" name="remainder">
        <el-form :model="remainderQueryParams" ref="remainderQueryParams" :inline="true">
          <el-form-item label="订单编号:" prop="orderNo">
            <el-input
              style="width: 300px"
              v-model="remainderQueryParams.orderNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="remainderHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="remainderHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="订单来源:" prop="orderSource">
            <el-select v-model="remainderQueryParams.orderSource" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="dict in dict.type.order_source"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择活动:" prop="activityId">
            <ActivitySelector
              style="width: 300px"
              placeholder="请选择活动"
              v-model="remainderQueryParams.activityId"
              retrun-type="string"
              :not-show-all-option="true"
              clearable
            />
          </el-form-item>
          <el-form-item label="商品名称:" prop="groupPurchaseGoods">
            <el-input
              style="width: 300px"
              v-model="remainderQueryParams.groupPurchaseGoods"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="remainderHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="remainderHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="交易方:" prop="traders">
            <el-input
              style="width: 300px"
              v-model="remainderQueryParams.traders"
              placeholder="请输入交易方名称或id"
              clearable
              @keyup.enter.native="remainderHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="remainderHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="资金类型:" prop="fundType">
            <el-select v-model="remainderQueryParams.fundType" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="dict in dict.type.fund_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间">
            <el-date-picker
              v-model="remainderQueryParams.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="remainderHandleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="remainderResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="remainderList">
          <el-table-column label="订单编号" prop="orderNo"/>
          <el-table-column label="交易类型" prop="fundType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.fund_type" :value="scope.row.fundType"/>
            </template>
          </el-table-column>
          <el-table-column label="来源" prop="activityTitle" width="270">
            <template slot-scope="scope">
              <router-link :to="{path:'/index'}" class="link-type">
                {{ scope.row.activityTitle }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="groupPurchaseGoods"/>
          <el-table-column label="金额(元)" prop="tradeAmount">
            <template slot-scope="scope">
              <span v-if="scope.row.tradeAmount > 0" style="color: #e02020">
                <template v-if="scope.row.fundType === 'charge_deduction' || scope.row.fundType === 'return_fee'">
                  +{{ scope.row.amountTotal * 10/1000 }}元
                </template>
                <template v-else>
                  +{{ scope.row.tradeAmount }}元
                </template>
              </span>
              <span v-else-if="scope.row.tradeAmount < 0" style="color: #82da26;font-size: 1em;">
                <template v-if="scope.row.fundType === 'charge_deduction' || scope.row.fundType === 'return_fee'">
                  <template v-if="scope.row.amountTotal.slice(0,1) === '-'">
                    {{ scope.row.amountTotal * 10/1000 }}元
                  </template>
                  <template v-else>
                    -{{ scope.row.amountTotal * 10/1000 }}元
                  </template>
                </template>
                <template v-else>
                  <template v-if="scope.row.amountTotal.slice(0,1) === '-'">
                    {{ scope.row.tradeAmount }}元
                  </template>
                  <template v-else>
                    -{{ scope.row.tradeAmount }}元
                  </template>
                </template>
              </span>
              <span v-else style="color: #b9b9b9">
                <template v-if="scope.row.fundType === 'charge_deduction' || scope.row.fundType === 'return_fee'">
                  {{ scope.row.amountTotal * 10/1000 }}元
                </template>
                <template v-else>
                  {{ scope.row.tradeAmount }}元
                </template>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="交易方">
            <template slot-scope="scope">
              {{ scope.row.nickname }}
              <br/>
              ID：{{ scope.row.wxUserId }}
            </template>
          </el-table-column>
          <el-table-column label="交易时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="remainderTotal>0"
          :total="remainderTotal"
          :page.sync="remainderQueryParams.pageNum"
          :limit.sync="remainderQueryParams.pageSize"
          @pagination="getRemainderDetailList"
        />
      </el-tab-pane>
      <el-tab-pane label="待结算明细" name="waitSettlement">
        <el-form :model="waitSettlementQueryParams" ref="waitSettlementQueryParams" :inline="true">
          <el-form-item label="订单编号:" prop="orderNo">
            <el-input
              style="width: 300px"
              v-model="waitSettlementQueryParams.orderNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="waitSettlementHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="waitSettlementHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="订单来源:" prop="orderSource">
            <el-select v-model="waitSettlementQueryParams.orderSource" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="dict in dict.type.order_source"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择活动:" prop="activityId">
            <ActivitySelector
              style="width: 300px"
              placeholder="请选择活动"
              v-model="waitSettlementQueryParams.activityId"
              retrun-type="string"
              :not-show-all-option="true"
              clearable
            />
          </el-form-item>
          <el-form-item label="商品名称:" prop="groupPurchaseGoods">
            <el-input
              style="width: 300px"
              v-model="waitSettlementQueryParams.groupPurchaseGoods"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="waitSettlementHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="waitSettlementHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="交易方:" prop="traders">
            <el-input
              style="width: 300px"
              v-model="waitSettlementQueryParams.traders"
              placeholder="请输入交易方名称或id"
              clearable
              @keyup.enter.native="waitSettlementHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="waitSettlementHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="资金类型:" prop="fundType">
            <el-select v-model="waitSettlementQueryParams.fundType" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="dict in dict.type.fund_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间">
            <el-date-picker
              v-model="waitSettlementQueryParams.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="waitSettlementHandleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="waitSettlementResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="waitSettlementList">
          <el-table-column label="订单编号" prop="orderNo"/>
          <el-table-column label="交易类型" prop="fundType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.fund_type" :value="scope.row.fundType"/>
            </template>
          </el-table-column>
          <el-table-column label="来源" prop="orderSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.order_source" :value="scope.row.orderSource"/>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="groupPurchaseGoods"/>
          <el-table-column label="交易金额(元)" prop="amountTotal"/>
<!--          <el-table-column label="手续费" prop="commission"/>-->
          <el-table-column label="手续费" prop="commission">
            <template slot-scope="scope">
              {{ scope.row.amountTotal * 10/1000 }}
            </template>
          </el-table-column>
          <el-table-column label="佣金" prop="commission">
            <template slot-scope="scope">
            </template>
          </el-table-column>
          <el-table-column label="返利" prop="rebateAmount"/>
          <el-table-column label="员工奖励" prop="staffRewardAmount"/>
          <el-table-column label="结算后实收" prop="staffRewardAmount"/>
          <el-table-column label="交易时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="清算明细" name="liquidation">
        <el-form :model="settlementQueryParams" ref="settlementQueryParam" size="small" :inline="true">
          <el-form-item label="活动名称:" prop="title">
            <el-input
              v-model="settlementQueryParams.title"
              placeholder="请输入活动名称"
              clearable
              @clear="settlementHandleQuery"
              @keyup.enter.native="settlementHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="settlementHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="活动状态:">
            <el-select v-model="settlementQueryParams.state" placeholder="请选择" clearable
                       @change="settlementHandleQuery">
              <el-option
                v-for="dict in dict.type.activity_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          :data="settlementList"
          style="width: 100%"
          ref="radioTable"
          fixed
          stripe>
          <el-table-column label="标题" prop="title" key="title"/>
          <el-table-column key="personnelNumber" label="活动状态">
            <template slot-scope="scope">
              <el-tag type="success" size="small"><dict-tag :options="dict.type.activity_status" :value="scope.row.state"/></el-tag>
            </template>
          </el-table-column>
          <el-table-column key="isSettlement" label="是否可清算">
            <template slot-scope="scope">
              {{ scope.row.state === 2 ? '是':'否' }}
            </template>
          </el-table-column>
          <el-table-column key="settlementType" label="清算类型">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.settlement_type" :value="scope.row.settlementType"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template v-slot="scope">
              <el-button
                v-if="scope.row.state === 2 && scope.row.settlementType === 0"
                size="mini"
                type="text"
                @click="manualSettlement(scope.row)">申请清算</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="settlementTotal>0"
          :total="settlementTotal"
          :page.sync="settlementQueryParams.pageNum"
          :limit.sync="settlementQueryParams.pageSize"
          @pagination="getSettlementList"
        />
      </el-tab-pane>
      <el-tab-pane label="提现明细" name="withdrawal">
        <el-form :model="withdrawalQueryParams" ref="withdrawalQueryParams" :inline="true">
          <el-form-item label="支付单号:" prop="withdrawalNo">
            <el-input
              style="width: 300px"
              v-model="withdrawalQueryParams.withdrawalNo"
              placeholder="请输入支付单号"
              clearable
              @keyup.enter.native="withdrawalHandleQuery">
              <el-button circle slot="append" icon="el-icon-search" @click="withdrawalHandleQuery"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="提现状态:" prop="status">
            <el-select v-model="withdrawalQueryParams.status" placeholder="请选择" clearable>
              <el-option
                v-for="dict in dict.type.withdrawal_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现时间:">
            <el-date-picker
              v-model="withdrawalQueryParams.createTimeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="到账时间:">
            <el-date-picker
              v-model="withdrawalQueryParams.reachTimeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="withdrawalHandleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="withdrawalResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="withdrawalList">
          <el-table-column label="支付单号" prop="withdrawalNo"/>
          <el-table-column label="金额" prop="amountTotal">
            <template slot-scope="scope">
              <span v-if="scope.row.amountTotal" style="color: red"> +{{ scope.row.amountTotal }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="提现手续费" prop="commission">
            <template slot-scope="scope">
              <span v-if="scope.row.commission">{{ scope.row.commission }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="实际到账" prop="realityAccountTotal">
            <template slot-scope="scope">
              <span v-if="scope.row.realityAccountTotal">{{ scope.row.realityAccountTotal }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="提现账户" width="300">
            <template slot-scope="scope">
              <div>{{ scope.row.bankAccount }}</div>
              <div>{{ scope.row.cardHolding }}</div>
              <div>{{ scope.row.bankName }}</div>
              <div>{{ scope.row.subbranch }}</div>
            </template>
          </el-table-column>
          <el-table-column label="提取状态" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.withdrawal_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="提现时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到账时间" prop="reachTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.reachTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="失败原因" prop="failRemark"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == '1'"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="goHandleUpdate(scope.row)"
              >修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="withdrawalTotal>0"
          :total="withdrawalTotal"
          :page.sync="withdrawalQueryParams.pageNum"
          :limit.sync="withdrawalQueryParams.pageSize"
          @pagination="getWithdrawalDetailList"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="活动清算明细" :visible.sync="settlementDetailOpen" width="500px" append-to-body>
      <div class="settlement-detail">
        <div class="settlement-detail-item">活动标题：{{ settlementDetail.title }}</div>
        <div class="settlement-detail-item">活动支付总金额：{{ settlementDetail.reality_pay_amount_total }} 元</div>
        <div class="settlement-detail-item">活动手续总金额：{{ settlementDetail.commission_total }} 元</div>
        <div class="settlement-detail-item">活动一级分销总金额：{{ settlementDetail.one_distribution_amount_total }} 元</div>
        <div class="settlement-detail-item">活动二级分销总金额：{{ settlementDetail.two_distribution_amount_total }} 元</div>
        <div class="settlement-detail-item">活动实收总金额：{{ settlementDetail.actual_amount_total }} 元</div>
      </div>
      <div style="color: red">
        提示：活动结束后若没有申请清算，3天后系统会自动完成清算任务。
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settlementDetailOpen = false" size="mini">关 闭</el-button>
        <el-button type="primary" @click="confirmSettlement" size="mini">确定申请</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提现" :visible.sync="withdrawalOpen" width="600px" append-to-body @close="closeDialog">
      <el-form ref="withdrawalForm" :model="withdrawalForm" :rules="withdrawalRules" label-width="100px">
        <el-form-item label="开户行:" prop="bankName">
          <el-input v-model="withdrawalForm.bankName" placeholder="请输入开户行" />
          <div class="withdrawal-tip">
            示例：中国人民银行、中国建设银行、中国工商银行等...
          </div>
        </el-form-item>
        <el-form-item label="开户支行:" prop="subbranch">
          <el-input v-model="withdrawalForm.subbranch" placeholder="请输入开户支行" />
          <div class="withdrawal-tip">
            示例：长沙支行、北京通州支行、成都郫县支行等（某省某区某县支行）
          </div>
        </el-form-item>
        <el-form-item label="银行卡号:" prop="bankAccount">
          <el-input v-model="withdrawalForm.bankAccount" placeholder="请输入银行卡号" />
          <div class="withdrawal-tip">
            注意事项：请反复核对银行卡数字和卡号位数
          </div>
        </el-form-item>
        <el-form-item label="持卡人名称:" prop="cardHolding">
          <el-input v-model="withdrawalForm.cardHolding" placeholder="请输入持卡人名称" />
          <div class="withdrawal-tip">
            <div>
              私人账户示例：张三（银行卡持有人全名）
            </div>
            <div>
              对公账户示例：长沙市爱悠艺术教育有限公司（贵公司全称）
            </div>
          </div>
        </el-form-item>
        <el-form-item label="提现金额:" prop="amountTotal">
          <el-input type="number" v-model="withdrawalForm.amountTotal" placeholder="请输入提现金额">
            <template slot="append">元</template>
          </el-input>
          <div class="withdrawal" v-if="confirmType === 'add'">
            <div>
              可提现金额：{{ stats.walletAmount }}元
            </div>
            <div>
              <el-button
                @click="allWithdrawal"
                type="text">全部提现</el-button>
            </div>
          </div>
          <div class="withdrawal" v-if="confirmType === 'update'">
            <div>
              可提现金额：{{ createAmountTotal }}元
            </div>
            <div>
              <el-button
                @click="allWithdrawal"
                type="text">全部提现</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="withdrawalOpen = false" size="mini">关 闭</el-button>
        <el-button v-if="confirmType === 'add'" type="primary" @click="confirmWithdrawal" size="mini">提 现</el-button>
        <el-button v-if="confirmType === 'update'" type="primary" @click="confirmWithdrawalUpdate" size="mini">保存修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ActivitySelector from "@/components/yjj/ActivitySelector";
import { remainderDetailList,waitSettlementDetailList,tradeDataStats } from "@/api/triones/orderTrade";
import {manualSettlement, settlementApply, settlementPageList} from "@/api/triones/activity";
import {apply, applyUpdate, withdrawalDetailList} from "@/api/triones/withdrawalRecord";
export default {
  name: "index",
  components: { ActivitySelector },
  dicts: ['order_source','fund_type','activity_status','settlement_type','withdrawal_status'],
  data() {
    return {
      tabsActiveName: 'remainder',
      stats: {
        walletAmount: 0,
        waitSettlementAmount: 0,
        waitWithdrawalTotal: 0,
        waitSettlementTotal: 0,
        alreadyWithdrawalTotal: 0,
        inviteDeductionTotal: 0,
        commissionTotal: 0,
        inProgressWithdrawalTotal: 0
      },
      loading: true,
      /** 余额明细 */
      remainderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        orderSource: undefined,
        activityId: undefined,
        groupPurchaseGoods: undefined,
        traders: undefined,
        fundType: undefined,
        dateRange: []
      },
      remainderList: [],
      remainderTotal: 0,

      /** 结算明细 */
      waitSettlementQueryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        orderSource: undefined,
        activityId: undefined,
        groupPurchaseGoods: undefined,
        traders: undefined,
        fundType: undefined,
        dateRange: []
      },
      waitSettlementList: [],
      waitSettlementTotal: 0,

      /** 提现明细 */
      withdrawalQueryParams: {
        pageNum: 1,
        pageSize: 10,
        withdrawalNo: undefined,
        nickname: undefined,
        status: undefined,
        createTimeRange: [],
        reachTimeRange: []
      },
      withdrawalList: [],
      withdrawalTotal: 0,
      settlementList: [],
      settlementTotal: 0,
      settlementQueryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        state: undefined
      },
      settlementDetailOpen: false,
      settlementDetail: {
        id: undefined,
        title: '',
        reality_pay_amount_total: 0,
        commission_total: 0,
        one_distribution_amount_total: 0,
        two_distribution_amount_total: 0,
        actual_amount_total: 0
      },
      withdrawalOpen: false,
      withdrawalForm: {},
      confirmType: undefined,
      createAmountTotal: 0,
      withdrawalRules: {
        bankName: [
          {required: true, message: "开户行不能为空", trigger: "blur"}
        ],
        subbranch: [
          {required: true, message: "开户支行不能为空", trigger: "blur"}
        ],
        bankAccount: [
          {required: true, message: "银行账号不能为空", trigger: "blur"}
        ],
        cardHolding: [
          {required: true, message: "持卡人名称不能为空", trigger: "blur"}
        ],
        amountTotal: [
          {required: true, message: "提现金额不能为空", trigger: "blur"}
        ]
      }
    }
  },
  filters: {
    numFilter (value) {
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  created() {
    this.getStats();
    this.getRemainderDetailList();
  },
  methods: {
    getStats() {
      tradeDataStats().then(response => {
        this.stats = response.data;
      })
    },
    /** 切换标签页 */
    handleClick(tab, event) {
      if (tab.name === 'remainder') {
        this.getRemainderDetailList();
        this.getStats();
      }
      if (tab.name === 'waitSettlement') {
        this.getWaitSettlementDetailList();
      }
      if (tab.name === 'withdrawal') {
        this.getWithdrawalDetailList();
      }
      if (tab.name === 'liquidation') {
        this.getSettlementList();
      }
    },
    /** 余额明细检索 */
    remainderHandleQuery() {
      this.remainderQueryParams.pageNum = 1;
      this.getRemainderDetailList();
    },
    /** 余额明细重置 */
    remainderResetQuery() {
      this.resetForm("remainderQueryParams");
      this.remainderQueryParams.dateRange = [];
      this.remainderHandleQuery();
    },
    /** 获取余额明细列表 */
    getRemainderDetailList() {
      this.loading = true;
      remainderDetailList(this.remainderQueryParams).then(response => {
        this.remainderList = response.rows;
        this.remainderTotal = response.total;
        this.loading = false;
      })
    },
    /** 待结算明细检索 */
    waitSettlementHandleQuery() {
      this.waitSettlementQueryParams.pageNum = 1;
      this.getWaitSettlementDetailList();
    },
    /** 待结算明细重置 */
    waitSettlementResetQuery() {
      this.resetForm("waitSettlementQueryParams");
      this.waitSettlementQueryParams.dateRange = [];
      this.waitSettlementHandleQuery();
    },
    /** 获取结算明细列表 */
    getWaitSettlementDetailList() {
      this.loading = true;
      waitSettlementDetailList(this.waitSettlementQueryParams).then(response => {
        this.waitSettlementList = response.rows;
        this.waitSettlementTotal = response.total;
        this.loading = false;
      })
    },
    /** 提现明细检索 */
    withdrawalHandleQuery() {
      this.withdrawalQueryParams.pageNum = 1;
      this.getWithdrawalDetailList()
    },
    /** 提现明细重置 */
    withdrawalResetQuery() {
      this.resetForm("withdrawalQueryParams");
      this.withdrawalQueryParams.createTimeRange = [];
      this.withdrawalQueryParams.reachTimeRange = [];
      this.withdrawalHandleQuery();
    },
    /** 获取提现明细列表 */
    getWithdrawalDetailList() {
      this.loading = true;
      withdrawalDetailList(this.withdrawalQueryParams).then(response => {
        this.withdrawalList = response.rows;
        this.withdrawalTotal = response.total;
        this.loading = false;
      })
    },
    /** 查看清算列表 */
    manualSettlement(row) {
      manualSettlement(row.id).then(response => {
        this.settlementDetail = response.data;
        this.settlementDetailOpen = true;
      })
    },
    getSettlementList() {
      settlementPageList(this.settlementQueryParams).then(response => {
        this.settlementList = response.rows;
        this.settlementTotal = response.total;
      })
    },
    settlementHandleQuery() {
      this.settlementQueryParams.pageNum = 1;
      this.getSettlementList();
    },
    /** 确认清算 */
    confirmSettlement() {
      // settlement(this.settlementDetail.id).then(response => {
      //   this.$message.success('操作成功')
      //   this.settlementDetailOpen = false;
      //   this.reSettlementSet();
      //   this.getSettlementList();
      //   this.getStats();
      // })

      settlementApply(this.settlementDetail.id).then(response => {
        this.$message.success('申请成功')
        this.settlementDetailOpen = false;
        this.reSettlementSet();
        this.getSettlementList();
        this.getStats();
      })
    },
    reSettlementSet() {
      this.settlementDetail= {
        id: undefined,
        title: '',
        reality_pay_amount_total: 0,
        commission_total: 0,
        one_distribution_amount_total: 0,
        two_distribution_amount_total: 0,
        actual_amount_total: 0
      }
    },
    /** 提现申请 */
    withdrawalApply(walletAmount) {
      this.confirmType = 'add';
      if (walletAmount <= 0) {
        this.$message.warning("没有可提现金额！！！");
      } else {
        this.withdrawalReset();
        this.withdrawalOpen = true;
      }
    },
    withdrawalReset() {
      this.withdrawalForm = {
        id: undefined,
        withdrawalNo: undefined,
        commission: undefined,
        amountTotal: 0,
        realityAccountTotal: undefined,
        bankName: undefined,
        bankAccount: undefined,
        subbranch: undefined,
        cardHolding: undefined
      };
      this.resetForm("withdrawalForm");
    },
    /** 确认提现 */
    confirmWithdrawal() {
      this.$refs["withdrawalForm"].validate(valid => {
        if (valid) {
          if (this.withdrawalForm.amountTotal <= 0) {
            this.$message.error("提现金额不能为0");
          } else {
            this.$modal.confirm('请仔细核对填写信息，确认提交后将进入处理中，届时将不予撤销和修改信息！！！').then(() => {
              apply(this.withdrawalForm).then(response => {
                this.$message.success("操作成功");
                this.withdrawalOpen = false;
                this.withdrawalReset();
                this.getStats();
                this.getWithdrawalDetailList();
              })
            })
          }
        }
      });
    },
    /** 修改体现 */
    confirmWithdrawalUpdate() {
      this.$refs["withdrawalForm"].validate(valid => {
        if (valid) {
          if (this.withdrawalForm.amountTotal <= 0) {
            this.$message.error("提现金额不能为0");
          } else {
            this.$modal.confirm('请仔细核对填写信息，确认提交后将进入处理中，届时将不予撤销和修改信息！！！').then(() => {
              applyUpdate(this.withdrawalForm).then(response => {
                this.$message.success("操作成功");
                this.withdrawalOpen = false;
                this.closeDialog();
                this.getWithdrawalDetailList();
              })
            })
          }
        }
      });
    },
    /** 全部提现 */
    allWithdrawal() {
      if (this.confirmType === 'add') {
        this.withdrawalForm.amountTotal = this.stats.walletAmount;
      } else if (this.confirmType === 'update') {
        this.withdrawalForm.amountTotal = this.createAmountTotal;
      }
    },
    /** 去修改体现金额 */
    goHandleUpdate(row) {
      this.confirmType = 'update';
      this.createAmountTotal = Number(this.stats.walletAmount) + Number(row.amountTotal);
      this.withdrawalReset();
      this.withdrawalForm = row;
      this.withdrawalOpen = true;
    },
    closeDialog() {
      this.withdrawalReset();
      this.getStats();
      this.createAmountTotal = 0;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.dataStats{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1em;
  margin-bottom: 20px;
  > div{
    height: 120px;
    background: -webkit-linear-gradient(bottom, #ffffff, #f2f5ff);
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
    align-content: center;
    text-align: center;
    > span {
      font-size: 25px;
    }
  }
}
.describe {
  span {
    font-size: 14px;
    vertical-align : middle;
  }
  svg {
    margin-left: 5px;
    vertical-align : middle;
    width: 12px;
  }
}
.inProgressWithdrawal{
  font-size: 11px;
  color: rgba(0,0,0,0.5);
}
.tip {
  p {
    width: 300px;
    min-height: 10px;
    height: auto;
    font-size: 14px;
    margin: 0px;
  }
}

.settlement-detail {
  .settlement-detail-item {
    padding: 5px 0;
    font-size: 15px;
  }
}

.withdrawal {
  display: flex;
  justify-content: space-between;
}

.withdrawal-tip {
  color: #d76c6c;
}
</style>
